<template>
  <div class="catelog">
    <blank-box title="我的追剧">
      <template #content>
        <el-empty v-if="pursueList.length === 0" description="暂无追剧"></el-empty>
        <el-row :gutter="20">
          <el-col :span="8" v-for="drama in pursueList" :key="'pursue'+drama.id">
            <resource-cover-hor :drama="drama"></resource-cover-hor>
          </el-col>
        </el-row>
        <el-pagination
            layout="prev, pager, next"
            @current-change="pursuePageChange"
            :page-size="pursuePageVo.pageSize"
            :current-page.sync="pursuePageVo.currentPage"
            :total="pursuePageVo.total">
        </el-pagination>
      </template>
    </blank-box>
    <blank-box title="已看完">
      <template #content>
        <el-empty v-if="watchedList.length === 0" description="暂无已看完"></el-empty>
        <el-row :gutter="10">
          <el-col :span="3" v-for="watch in watchedList" :key="'watched'+watch.id">
            <resource-cover :drama="watch"></resource-cover>
          </el-col>
        </el-row>
        <el-pagination
            layout="prev, pager, next"
            @current-change="watchedPageChange"
            :page-size="watchedPageVo.pageSize"
            :current-page.sync="watchedPageVo.currentPage"
            :total="watchedPageVo.total">
        </el-pagination>
      </template>
    </blank-box>
    <blank-box title="我的清单">
      <template #content>
        <el-empty v-if="catelogList.length === 0" description="暂无已看完"></el-empty>
        <el-row :gutter="20">
          <el-col :span="8" v-for="catelog in catelogList" :key="'catelog'+catelog.id">
            <catelog-item :catelog="catelog" @editCatelog="editCatelog" @deleteCatelog="deleteCatelog"></catelog-item>
          </el-col>
        </el-row>
        <el-pagination
            layout="prev, pager, next"
            @current-change="catelogPageChange"
            :page-size="catelogPageVo.pageSize"
            :current-page.sync="catelogPageVo.currentPage"
            :total="catelogPageVo.total">
        </el-pagination>
      </template>
    </blank-box>
    <blank-box title="我收藏的清单">
      <template #content>
        <el-empty v-if="collectList.length === 0" description="暂无收藏"></el-empty>
        <el-row :gutter="20">
          <el-col :span="8" v-for="catelog in collectList" :key="'collect'+catelog.id">
            <catelog-item :catelog="catelog"></catelog-item>
          </el-col>
        </el-row>
        <el-pagination
            layout="prev, pager, next"
            @current-change="collectPageChange"
            :page-size="collectPageVo.pageSize"
            :current-page.sync="collectPageVo.currentPage"
            :total="collectPageVo.total">
        </el-pagination>
      </template>
    </blank-box>

    <el-dialog
        top="10vh"
        custom-class="editCatelogDialog"
        title="清单编辑"
        :visible.sync="dialogEditVisible"
        width="30%"
        center>
      <el-form label-position="top" label-width="80px" :model="editCatelogObj">
        <el-form-item label="标题">
          <el-input v-model="editCatelogObj.title"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
              class="cover-uploader"
              :action="baseUrl+`/upload/img`"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
              :before-upload="beforeCoverUpload">
            <img v-if="editCatelogObj.cover" :src="editCatelogObj.cover | filterImg" class="catelog-cover">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="editCatelogObj.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="updateCatelog">保 存</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import BlankBox from "../../components/BlankBox";
import {catelogList, catelogMapList, catelogPageUser, updateCatelog} from "../../api/catelog";
import ResourceCoverHor from "../../components/ResourceCoverHor";
import ResourceCover from "../../components/ResourceCover";
import {pagePursuing, pageWatched} from "../../api/user-pursue";
import CatelogItem from "./component/CatelogItem";
import {userCollectedCatelog} from "../../api/catelog-collected";
import {scrollTo} from "@/utils/scroll-to";

export default {
  name: "index",
  data() {
    return {
      pursuePageVo: {
        userId: this.$store.getters.user.id,
        currentPage: 1,
        pageSize: 6,
        total: 0
      },
      watchedPageVo: {
        userId: this.$store.getters.user.id,
        currentPage: 1,
        pageSize: 6,
        total: 0
      },
      catelogPageVo: {
        userId: this.$store.getters.user.id,
        currentPage: 1,
        pageSize: 6,
        total: 0
      },
      collectPageVo: {
        userId: this.$store.getters.user.id,
        currentPage: 1,
        pageSize: 6,
        total: 0
      },
      pursueList: [],
      watchedList: [],
      catelogList: [],
      collectList: [],
      dialogEditVisible: false,
      editCatelogObj: {title: '', cover: '', description: ''},
      uploaded: false
    }
  },
  created() {
    this.getCatelogCollection()
  },
  methods: {
    getCatelogCollection() {
      const catelogMapVo = {
        pursueVo: this.pursuePageVo,
        watchedVo: this.watchedPageVo,
        catelogVo: this.catelogPageVo,
        catelogCollectedVo: this.collectPageVo
      }
      catelogMapList(this.user.id, catelogMapVo).then(res => {
        const {data} = res.data
        this.pursueList = data.pursuePage.list
        this.updatePageVo(this.pursuePageVo, data.pursuePage)
        this.watchedList = data.watchedPage.list
        this.updatePageVo(this.watchedPageVo, data.watchedPage)
        this.catelogList = data.catelogPage.list
        this.updatePageVo(this.catelogPageVo, data.catelogPage)
        this.collectList = data.collectPage.list
        this.updatePageVo(this.collectPageVo, data.collectPage)
      })
    },
    updatePageVo(oldPage, newPage) {
      oldPage.currentPage = newPage.pageNum
      oldPage.pageSize = newPage.pageSize
      oldPage.total = newPage.total
    },
    //追剧分页查询
    pursuePageChange(currentPage) {
      pagePursuing(this.pursuePageVo).then(res => {
        const {data} = res.data
        this.pursueList = data.list
        this.updatePageVo(this.pursuePageVo, data)
      })
    },
    watchedPageChange(currentPage) {
      pageWatched(this.watchedPageVo).then(res => {
        const {data} = res.data
        this.watchedList = data.list
        this.updatePageVo(this.watchedPageVo, data)
      })
    },
    catelogPageChange(currentPage) {
      catelogPageUser(this.catelogPageVo).then(res => {
        const {data} = res.data
        this.catelogList = data.list
        this.updatePageVo(this.catelogPageVo, data)
      })
    },
    collectPageChange(currentPage) {
      userCollectedCatelog(this.collectPageVo).then(res => {
        const {data} = res.data
        this.collectList = data.list
        this.updatePageVo(this.collectPageVo, data)
      })
    },
    editCatelog(catelog) {
      this.$copyProperties(this.editCatelogObj, catelog);
      this.dialogEditVisible = true
    },
    deleteCatelog() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleCoverSuccess(response, file, fileList) {
      let data = response.data
      if (data.path) {
        this.editCatelogObj.cover = data.path
        this.uploaded = true
      }
    },
    beforeCoverUpload(file) {
    },
    updateCatelog() {
      updateCatelog(this.editCatelogObj).then(res => {
        let data = res.data
        this.$message.success(data.message)
        this.catelogPageChange()
      })
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_URL
    }
  },
  components: {CatelogItem, ResourceCover, ResourceCoverHor, BlankBox}
}
</script>

<style scoped>
.catelog-cover {
  max-height: 200px;
  object-fit: cover;
}

>>> .editCatelogDialog .el-dialog__body {
  max-height: 380px !important;
  overflow-y: auto;
}

>>> .cover-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

>>> .cover-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
